<template>
	<view class="container">
		<view style="height: var(--status-bar-height);"></view>
		<view class="top">
			<view class="search">
				<image @click="back" style="width: 40px;height: 27px;margin-top: 15px;"
					src="/static/img/search/back.png">
				</image>
				<uni-search-bar style="width: 100%;" @focus="focus" @input="change" @cancel="cancel"
					placeholder="请输入搜索关键词" v-model="Value" bgColor="#EEEEEE" @confirm="search" />
			</view>
			<!-- 类型选择 -->
			<u-tabs :current="tabIndex" :list="typeList" @click="tabClick" lineWidth="30" lineColor="#ffce45"
				:activeStyle="{
					            color: '#303133',
					            fontWeight: 'bold',
					            transform: 'scale(1.5)'
					        }" :inactiveStyle="{
					            color: '#606266',
					            transform: 'scale(1.2)'
					        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
			</u-tabs>
		</view>
		<!-- 提示搜索 -->
		<view v-if="SearchList" style="margin: 0 0 10px 10px;">
			<!-- 判断input获取焦点同时后台给到了数据 -->
			<view class="InputList" v-show="isFocus && SearchList.length">
				<view v-for="item,index in SearchList" :key="index" @click="setValue(item.vodName)" class="listSon">
					{{item.vodName}}
				</view>
			</view>
		</view>

		<!-- 搜索的视频列表 -->
		<view class="vodContent">
			<view v-for="item,index in vodList" :key="index" @click="itemClick(item.vod_id)"
				style="display: flex;flex-direction: row;margin-top: 10px; border: 1px solid #ffce45;width: 100%;height: 160px;border-radius: 10px;">
				<view class="img" style="margin: 5px 5px 10px 10px;">
					<image style="height: 150px;width: 110px;border-radius: 6px;" :src="item.vod_pic"></image>
				</view>
				<view class="introduce"
					style="width: 100%;display: flex;flex-direction: column;margin: 5px 5px 10px 10px;">
					<text
						style="font-size: 17px;font-weight: bold; width: 200px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{item.vod_name}}</text>
					<view style="margin-top: 15px;display: flex;flex-direction: row;">
						<u-rate readonly size="22" :value="parseFloat(item.vod_douban_score)/2" active-color="#ffce45"
							inactive-color="#b2b2b2"></u-rate>
						<text style="color: #76797d;">{{item.vod_douban_score}}</text>
					</view>
					<text
						style="display:inline-block; word-wrap: break-word;margin-top: 15px;color: #76797d;font-size: 10px;height: 40px; width: 200px;overflow: hidden;text-overflow: ellipsis;">
						{{item.vod_blurb}}
					</text>
					<view
						style="margin:10px 0px 0px 0px;font-size: 10px;color: #76797d;width: 50px;height: 19px;border-radius: 5px;background-color: #e8edf3;text-align: center;">
						<text>{{item.vod_year}}年</text>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" />
		</view>
	</view>
</template>

<script>
	import {
		http
	} from '@/config/common.js'
	export default {
		data() {
			return {
				Value: '', //搜索内容
				isFocus: false, //文字框是否显示
				SearchList: [],
				page: 1,
				size: 10,
				type: '',
				totalPage: 0,
				tabIndex: 0,
				status: 'loadmore',
				vodList: [],
				typeList: [{
					name: '全部'
				}, {
					name: '电影'
				}, {
					name: '动漫'
				}, {
					name: '综艺'
				}, {
					name: '电视剧'
				}, {
					name: '纪录片'
				}],
			}
		},
		onLoad(res) {
			this.Value = res.searchText;
			this.getVods();
		},
		onShow() {},
		//加载更多
		onReachBottom() {
			if (this.page >= this.totalPage) {
				this.status = 'nomore';
				return;
			}
			this.status = 'loading';
			this.page = ++this.page;
			this.getVods();
			setTimeout(() => {
				if (this.page >= this.totalPage) this.status = 'nomore';
				else this.status = 'loading';
			}, 2000)
		},
		methods: {
			cancel() {
				this.isFocus = false;
			},
			change(value) {
				this.Value = value.trim();
				this.getList();
			},
			//获得焦点
			focus() {
				this.isFocus = true;
			},
			getList() { //这一步是获取数据
				http.get('/search/matchingItems', {
					params: {
						searchText: this.Value,
					}
				}).then(res => {
					this.SearchList = res.data.data;
				}).catch(err => {
					console.log(err)
				})
			},
			//搜索事件
			search() {
				this.vodList = [];
				this.SearchList = [];
				this.isFocus = false;
				let _this = this;
				uni.getStorage({ //从缓存中取搜索历史记录的数组
					key: 'search_cache',
					success(res) { //获取成功
						let list = res.data;
						for (let i in list) { //循环遍历
							if (list[i] == _this.Value) { //如果缓存数组中有搜索关键词
								list.splice(i, 1) //删除数组中的该关键词
							}
						}
						list.unshift(_this.Value); //将搜索关键词添加到数组开头
						list.splice(10) //只保留10个
						uni.setStorage({ //将新的数组存入缓存
							key: 'search_cache',
							data: list,
						});
						//搜索
						_this.getVods();
					},
					fail() { //没有获取到缓存
						let list = [];
						list.push(_this.Value);
						uni.setStorage({
							key: 'search_cache',
							data: list,
						});
						//搜索
						_this.getVods();
					}
				})
			},
			//点击事件 搜索点击这一条
			setValue(value) {
				console.log('搜索信息为' + value)
				this.Value = value
				this.SearchList = []
				this.isFocus = false;
				this.search();
			},
			back() {
				uni.navigateBack();
			},
			//获取视频接口
			getVods() {
				http.get('/search/searchVod', {
					params: {
						searchText: this.Value,
						typeName: this.type,
						current: this.page,
						size: this.size
					}
				}).then(res => {
					const data = res.data.data;
					this.totalPage = data.pages;
					if (this.vodList.length > 0) {
						var list = data.records;
						for (var i = 0; i < list.length; i++) {
							this.vodList.push(list[i]);
						}
					} else {
						this.vodList = data.records;
					}
					if (this.vodList.length <= 0) {
						this.status = 'nomore';
					}
				}).catch(err => {
					console.log(err)
				})
			},
			tabClick(item) {
				console.log('item', item);
				if (item.name === "电影") {
					this.type = '片';
				} else if (item.name === "电视剧") {
					this.type = '剧';
				} else if (item.name === "全部") {
					this.type = '';
				} else {
					this.type = item.name;
				}
				this.page = 1;
				this.vodList = [];
				this.getVods();
			},
			itemClick(data) {
				//data：vodId
				uni.navigateTo({
					url: '/pages/video/video?vodId=' + data,

				})
			}
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}

	.top {
		position: sticky;
		top: 0px;
		z-index: 5555;
		background-color: #ffffff;
	}

	.search {
		width: 100%;
		display: flex;
		flex-direction: row;
		border-bottom: 1px solid #e5e5e5;
	}

	.InputList {
		position: absolute;
		/* 模块最上层 */
		z-index: 5555;
		width: 95%;
		height: auto;
		margin-top: -2px;
		border: 1rpx solid #ececec;
		border-radius: 5px;
		background-color: #ffffff;
	}

	.listSon {
		height: 30px;
		line-height: 27px;
		font-size: 16px;
		text-indent: 1em;
	}

	.listSon:nth-of-type(even) {
		background: #f7f7f7;
	}

	.vodContent {
		display: flex;
		flex-direction: column;
		width: 94%;
		margin: 0 0 10px 10px;
	}
</style>